<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>在线思维导图 - chenxuan工具</title>
	<meta name="keywords" content="思维导图,流程图,免费在线作图工具,在线流程图,在线思维导图">
	<meta name="description" content="在线思维导图是一个在线流程图绘图平台，为用户提供强大、易用的思维导图绘制工具！支持在线创作流程图并导出 SVG、PNG、JSON 等格式。">
	
	<link href="http://cdn.androidftp.top/pic/chenxuanweb/dog.png" type="image/x-icon" rel="shortcut icon">

	<!-- bower:css -->
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/codemirror.min.css" />
	<link rel="stylesheet" href="bower_components/hotbox/hotbox.css" />
	<link rel="stylesheet" href="bower_components/kityminder-core/dist/kityminder.core.css" />
	<link rel="stylesheet" href="bower_components/color-picker/dist/color-picker.min.css" />
	<!-- endbower -->

	<link rel="stylesheet" href="kityminder.editor.min.css">

	<style>
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
		h1.editor-title {
			background: #393F4F;
			color: white;
			margin: 0;
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			font-family: 'Hiragino Sans GB', 'Arial', 'Microsoft Yahei';
			font-weight: normal;
			padding: 0 20px;
		}
		div.minder-editor-container {
			position: absolute;
			top: 40px;
			bottom: 0;
			left: 0;
			right: 0;
		}
	</style>
</head>
<body ng-app="kityminderDemo" ng-controller="MainController">
<h1 class="editor-title">
	在线思维导图 | <a href="https://chenxuanweb.top/" target="_blank">chenxuan官网</a>
</h1>
<kityminder-editor on-init="initEditor(editor, minder)" data-theme="fresh-green"></kityminder-editor>

<!-- bower:js -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="js/codemirror.min.js"></script>
<script src="js/xml.min.js"></script>
<script src="js/javascript.min.js"></script>
<script src="js/css.min.js"></script>
<script src="js/htmlmixed.min.js"></script>
<script src="js/markdown.min.js"></script>
<script src="js/overlay.min.js"></script>
<script src="js/gfm.min.js"></script>
<script src="js/ui-codemirror.min.js"></script>
<script src="js/marked.min.js"></script>
<script src="bower_components/kity/dist/kity.min.js"></script>
<script src="bower_components/hotbox/hotbox.js"></script>
<script src="bower_components/json-diff/json-diff.js"></script>
<script src="bower_components/kityminder-core/dist/kityminder.core.min.js"></script>
<script src="bower_components/color-picker/dist/color-picker.min.js"></script>
<!-- endbower -->

<script src="kityminder.editor.min.js"></script>
<script>
(function () {
    var oldData;
    var html = '';
    html += '<a href="index.html" class="diy export" data-type="json">导出json</a>',
    html += '<a href="index.html" class="diy export" data-type="md">导出md</a>',
    html += '<a href="index.html" class="diy export" data-type="km">导出km</a>',
    html += '<a href="index.html" class="diy export" data-type="svg">导出svg</a>',
    html += '<a href="index.html" class="diy export" data-type="txt">导出text</a>',
    html += '<a href="index.html" class="diy export" data-type="png">导出png</a>',
    html += '<button class="diy input">',
    html += '导入(.json)<input type="file" id="fileInput" accept=".km,.txt,.md,.json" >',
    html += '</button>';

    $('.editor-title').append(html);

    $('.diy').css({
        // 'height': '30px',
        // 'line-height': '30px',
        'margin-top': '0px',
        'float': 'right',
        'background-color': '#393F4F',
        'min-width': '60px',
        'text-decoration': 'none',
        color: '#fff',
        'padding': '0 10px',
        border: 'none',
        'border-right': '1px solid #ccc',
    });
    $('.input').css({
        'overflow': 'hidden',
        'position': 'relative',
    }).find('input').css({
        cursor: 'pointer',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        display: 'inline-block',
        opacity: 0
    });

    $(document).on('click', '.export', function (event) {
        event.preventDefault();
        var $this = $(this),
        type = $this.data('type'),
        exportType;
        switch (type) {
        case 'km':
            exportType = 'json';
            break;
        case 'md':
            exportType = 'markdown';
            break;
        case 'svg':
            exportType = 'svg';
            break;
        case 'txt':
            exportType = 'text';
            break;
        case 'png':
            exportType = 'png';
            break;
        default:
            exportType = type;
            break;
        }

        editor.minder.exportData(exportType).then(function (content) {
            switch (exportType) {
            case 'json':
                console.log($.parseJSON(content));
                break;
            default:
                console.log(content);
                break;
            }
            var blob = new Blob();
            switch (exportType) {
            case 'png':
                blob = dataURLtoBlob(content); 
                break;
            default:
                blob = new Blob([content]);
                break;
            }
            var a = document.createElement("a"); 
            a.download = $('#node_text1').text() + '.' + type;
            a.href = URL.createObjectURL(blob);
            a.click();

        });
    });

    // 导入
    window.onload = function () {
        var fileInput = document.getElementById('fileInput');

        fileInput.addEventListener('change', function (e) {
            var file = fileInput.files[0],
            // textType = /(md|km)/,
            fileType = file.name.substr(file.name.lastIndexOf('.') + 1);
            console.log(file);
            switch (fileType) {
            case 'md':
                fileType = 'markdown';
                break;
            case 'txt':
                fileType = 'text';
                break;				
            case 'km':
            case 'json':
                fileType = 'json';
                break;
            default:
                console.log("File not supported!");
                alert('只支持.km、.md、、text、.json文件');
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var content = reader.result;
                editor.minder.importData(fileType, content).then(function (data) {
                    console.log(data)
                    $(fileInput).val('');
                });
            }
            reader.readAsText(file);
        });
    }

})();

//base64转换为图片blob
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(',');
    //注意base64的最后面中括号和引号是不转译的
    var _arr = arr[1].substring(0, arr[1].length - 2);
    var mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(_arr),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}
</script>

<script>
	angular.module('kityminderDemo', ['kityminderEditor'])
	.controller('MainController', function($scope) {
		$scope.initEditor = function(editor, minder) {
			window.editor = editor;
			window.minder = minder;
		};
	});
</script>
<script>
var _hmt = _hmt || [];
(function() {
	var hm = document.createElement("script");
	hm.src = "https://hm.baidu.com/hm.js?68c6d4f0f6c20c5974b17198fa6fd40a";
	var s = document.getElementsByTagName("script")[0]; 
	s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
